<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>西安Java技术交流</title>
<meta name="Keywords" content="西安，java，技术，交流，工作">
<meta name="Description" content="首页">
<meta name="Author" content="Xian Java">
<link rel="Shortcut Icon" href="dist/img/java.ico">
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="dist/css/zTreeStyle/zTreeStyle.css"
	type="text/css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div
		style="border: 1px solid #ddd; border-radius: 5px; margin: 5px 10px 10px 10px">
		<img src="dist/img/logo.gif" style="padding: 5px 15px;" />
		<div class="pull-right" style="padding: 10px;">
			<div>
				<a href=""><i class="icon icon-user-md"></i>&nbsp;登录</a> <a href=""><i
					class="icon icon-edit"></i>&nbsp;注册</a>
			</div>
		</div>
	</div>
	<div class="pull-left"
		style="width: 10%; height: 1000px; margin-left: 10px;">
		<div class="input-group" style="width: 100%">
			<input type="text" 
				class="form-control" data-provide="typeahead"
				data-source='["Deluxe Bicycle", "Football", "Basketball","Java实现浏览器预览office文档","Java实现浏览器生成word","篮球","足球","排球", "Super Deluxe Trampoline", "Super Duper Scooter"]'
				placeholder=" 关键字" style="width: 100%"> <span
				class="input-group-addon"><i class="icon icon-search"
				style="margin-left: -25px; position: relative; z-index: 999999;"></i></span>
		</div>
		<div
			style="width: 100%; border: 1px solid #ddd; border-radius: 5px; height: 400px; margin-top: 10px;">
			<ul class="nav nav-pills nav-stacked" role="navigation">
				<li class="dropdown"><a href="" class="dropdown-toggle"
					data-toggle="dropdown"> 常用方法 <b class="caret"></b>
				</a>
					<ul class="dropdown-menu">
						<div class="ztree" class="zTreeDemoBackground left">
							<ul id="treeDemo" class="ztree"></ul>
						</div>
					</ul></li>
				<li class="dropdown"><a href="" class="dropdown-toggle"
					data-toggle="dropdown"> 实用技术 <b class="caret"></b>
				</a>
					<ul class="dropdown-menu">
						<div class="ztree" class="zTreeDemoBackground left">
							<ul id="treeDemo1" class="ztree"></ul>
						</div>
					</ul></li>
				<li class="dropdown"><a href="" class="dropdown-toggle"
					data-toggle="dropdown"> Java EE <b class="caret"></b>
				</a>
					<ul class="dropdown-menu">
						<div class="ztree" class="zTreeDemoBackground left">
							<ul id="treeDemo2" class="ztree"></ul>
						</div>
					</ul></li>
			</ul>
		</div>
	</div>
	<div class="pull-right"
		style="width: 88%; height: 900px; border: 1px solid #ddd; border-radius: 5px; margin-right: 10px">
		<div style="width: 100%; height: 40px; padding: 10px 15px;">
			<ul class="nav nav-pills" role="tablist">
				<li role="presentation" class="active"><a href="">首页</a></li>
				<li role="presentation"><a href="">今日技术帮助</a></li>
				<li role="presentation"><a href="">薪资询问</a></li>
				<li role="presentation"><a href="">招聘信息</a></li>
				<li role="presentation"><a href="">求助公告</a></li>
				<li role="presentation"><a href="">其他</a></li>
			</ul>
		</div>
	</div>
	<script src="dist/js/jquery.min.js"></script>
	<script src="dist/js/bootstrap.min.js"></script>
	<script src="dist/js/others/bootstrap-typeahead.js"></script>
	<script src="dist/js/others/jquery-1.4.4.min.js"></script>
	<script src="dist/js/others/jquery.ztree.core.js"></script>
	<SCRIPT>
		var setting = {};

		var zNodes = [ {
			name : "父节点1 - 展开",
			open : true,
			children : [ {
				name : "父节点11 - 折叠",
				children : [ {
					name : "叶子节点111"
				}, {
					name : "叶子节点112"
				}, {
					name : "叶子节点113"
				}, {
					name : "叶子节点114"
				} ]
			}, {
				name : "父节点12 - 折叠",
				children : [ {
					name : "叶子节点121"
				}, {
					name : "叶子节点122"
				}, {
					name : "叶子节点123"
				}, {
					name : "叶子节点124"
				} ]
			}, {
				name : "父节点13 - 没有子节点",
				isParent : true
			} ]
		}, {
			name : "父节点2 - 折叠",
			children : [ {
				name : "父节点21 - 展开",
				open : true,
				children : [ {
					name : "叶子节点211"
				}, {
					name : "叶子节点212"
				}, {
					name : "叶子节点213"
				}, {
					name : "叶子节点214"
				} ]
			}, {
				name : "父节点22 - 折叠",
				children : [ {
					name : "叶子节点221"
				}, {
					name : "叶子节点222"
				}, {
					name : "叶子节点223"
				}, {
					name : "叶子节点224"
				} ]
			}, {
				name : "父节点23 - 折叠",
				children : [ {
					name : "叶子节点231"
				}, {
					name : "叶子节点232"
				}, {
					name : "叶子节点233"
				}, {
					name : "叶子节点234"
				} ]
			} ]
		}, {
			name : "父节点3 - 没有子节点",
			isParent : true
		}

		];

		$(document).ready(function() {
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
		$(document).ready(function() {
			$.fn.zTree.init($("#treeDemo1"), setting, zNodes);
		});
		$(document).ready(function() {
			$.fn.zTree.init($("#treeDemo2"), setting, zNodes);
		});
		
		$('.dropdown-menu').click(function(e) {
		    e.stopPropagation();
		});
	</SCRIPT>
</body>
</html>